<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue'
import { companyApis } from '@/apis'
import { sealTypeDict } from '@/enums'
import { KProModal } from '@king-one/antdv'
import { message } from 'ant-design-vue'

const { companyName, companyId } = defineProps<{ companyName: string, companyId: string }>()

const formRef = ref<FormInstance>()
const visible = defineModel<boolean>({
  default: false,
})
const formState = reactive({
  sealTypes: [],
})
const loading = ref<boolean>(false)
async function handleConfirm() {
  if (!formState.sealTypes.length) {
    message.error('请选择印章类型')
    return
  }
  loading.value = true
  companyApis.receiveCompanySeal({
    sealTypes: formState.sealTypes,
    companyId,
  }).then(() => {
    loading.value = false
    message.success('领取印章成功')
    visible.value = false
  }).catch(() => {
    loading.value = false
  })
}

const rules = reactive({
  sealTypes: [{ required: true, message: '请选择印章类型' }],
})
const labelCol = {
  span: 6,
}
const wrapperCol = {
  span: 18,
}
watch(() => visible.value, (newVal) => {
  if (newVal) {
    formRef.value?.resetFields()
  }
})
</script>

<template>
  <KProModal
    v-model="visible" :modal-props="{
      confirmLoading: loading,
    }" :title="`【${companyName}】领取印章`"
    @on-confirm="handleConfirm"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="印章类型" name="sealTypes">
        <a-checkbox-group v-model:value="formState.sealTypes">
          <a-row px-20 py-5 :gutter="[0, 15]">
            <a-col v-for="item in sealTypeDict" :key="item.value" span="12">
              <a-checkbox :value="item.value" name="sealTypes1">
                {{ item.label }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </KProModal>
</template>

<style scoped>

</style>
